// ==================== 顶部导航栏组件 ====================
const HeaderNav = {
    props: ['activeTab', 'statistics', 'autoRefresh'],
    emits: ['switchTab', 'toggleRefresh', 'refresh'],
    template: `
        <div class="header-nav">
            <div class="nav-container">
                <div class="nav-left">
                    <h1 class="logo">
                        <span class="logo-icon">🔒</span>
                        店铺三关一闭监控系统
                    </h1>
                </div>
                
                <div class="nav-center">
                    <el-menu 
                        :default-active="activeTab" 
                        mode="horizontal"
                        @select="(key) => $emit('switchTab', key)"
                        background-color="transparent"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                    >
                        <el-menu-item index="overview">
                            <el-icon><DataLine /></el-icon>
                            <span>监控概览</span>
                        </el-menu-item>
                        <el-menu-item index="shops">
                            <el-icon><Shop /></el-icon>
                            <span>门店管理</span>
                        </el-menu-item>
                        <el-menu-item index="sensors">
                            <el-icon><Cpu /></el-icon>
                            <span>传感器</span>
                        </el-menu-item>
                        <el-menu-item index="power">
                            <el-icon><Lightning /></el-icon>
                            <span>电力设备</span>
                        </el-menu-item>
                        <el-menu-item index="alarms">
                            <el-icon><Bell /></el-icon>
                            <span>告警中心</span>
                            <el-badge v-if="statistics && statistics.unconfirmedAlarmCount > 0" 
                                :value="statistics.unconfirmedAlarmCount" 
                                class="alarm-badge"
                            />
                        </el-menu-item>
                    </el-menu>
                </div>
                
                <div class="nav-right">
                    <el-switch
                        v-model="autoRefresh"
                        @change="$emit('toggleRefresh')"
                        active-text="自动刷新"
                        inactive-text="手动"
                        active-color="#13ce66"
                        style="margin-right: 20px;"
                    />
                    <el-button 
                        @click="$emit('refresh')" 
                        type="primary" 
                        :icon="Refresh"
                        circle
                    />
                    <span class="time-display">{{ formatTime(new Date()) }}</span>
                </div>
            </div>
        </div>
    `,
    setup() {
        const { Refresh } = ElementPlusIconsVue;
        const formatTime = (date) => {
            return date.toLocaleTimeString('zh-CN');
        };
        return { Refresh, formatTime };
    }
};

// ==================== 概览页组件 ====================
const OverviewPage = {
    props: ['statistics', 'shops', 'sensors', 'alarms'],
    emits: ['viewShop', 'viewSensor'],
    template: `
        <div class="overview-page">
            <!-- 统计卡片 -->
            <div class="stats-cards">
                <div class="stat-card stat-card-primary">
                    <div class="stat-icon">
                        <el-icon size="40"><Shop /></el-icon>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">{{ statistics.totalShops }}</div>
                        <div class="stat-label">门店总数</div>
                    </div>
                </div>
                
                <div class="stat-card stat-card-success">
                    <div class="stat-icon">
                        <el-icon size="40"><Cpu /></el-icon>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">{{ statistics.totalSensors }}</div>
                        <div class="stat-label">传感器总数</div>
                        <div class="stat-desc">在线: {{ statistics.onlineSensors }} | 离线: {{ statistics.offlineSensors }}</div>
                    </div>
                </div>
                
                <div class="stat-card stat-card-warning">
                    <div class="stat-icon">
                        <el-icon size="40"><Lock /></el-icon>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">{{ statistics.closedSwitches }}</div>
                        <div class="stat-label">已关闭开关</div>
                        <div class="stat-desc">开启: {{ statistics.openSwitches }} | 未知: {{ statistics.unknownSwitches }}</div>
                    </div>
                </div>
                
                <div class="stat-card stat-card-danger">
                    <div class="stat-icon">
                        <el-icon size="40"><Bell /></el-icon>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">{{ statistics.unconfirmedAlarmCount }}</div>
                        <div class="stat-label">未确认告警</div>
                        <div class="stat-desc">总告警: {{ statistics.totalAlarmCount }}</div>
                    </div>
                </div>
            </div>
            
            <!-- 门店状态列表 -->
            <div class="content-section">
                <div class="section-header">
                    <h2><el-icon><Shop /></el-icon> 门店开关状态监控</h2>
                    <el-tag type="info">实时更新</el-tag>
                </div>
                
                <div class="shops-grid">
                    <div 
                        v-for="shop in shops" 
                        :key="shop.id"
                        class="shop-card"
                        :class="getShopCardClass(shop)"
                        @click="$emit('viewShop', shop)"
                    >
                        <div class="shop-card-header">
                            <h3>{{ shop.name }}</h3>
                            <el-tag :type="getShopStatusType(shop)" size="small">
                                {{ getShopStatusText(shop) }}
                            </el-tag>
                        </div>
                        
                        <div class="shop-card-body">
                            <div class="shop-info">
                                <el-icon><Location /></el-icon>
                                <span>{{ shop.address }}</span>
                            </div>
                            <div class="shop-info">
                                <el-icon><User /></el-icon>
                                <span>{{ shop.manager || '未设置' }}</span>
                            </div>
                            <div class="shop-info">
                                <el-icon><Phone /></el-icon>
                                <span>{{ shop.phone || '未设置' }}</span>
                            </div>
                        </div>
                        
                        <div class="shop-card-footer">
                            <div class="sensor-status">
                                <span class="status-item">
                                    <el-icon color="#67c23a"><CircleCheck /></el-icon>
                                    {{ getShopClosedCount(shop.id) }} 个已关闭
                                </span>
                                <span class="status-item">
                                    <el-icon color="#f56c6c"><CircleClose /></el-icon>
                                    {{ getShopOpenCount(shop.id) }} 个开启
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 最新告警 -->
            <div v-if="alarms && alarms.length > 0" class="content-section">
                <div class="section-header">
                    <h2><el-icon><Bell /></el-icon> 最新告警</h2>
                    <el-tag type="danger">需要处理</el-tag>
                </div>
                
                <el-table :data="alarms.slice(0, 10)" stripe>
                    <el-table-column prop="shopName" label="门店" width="150" />
                    <el-table-column prop="sensorId" label="传感器ID" width="180" />
                    <el-table-column prop="alarmType" label="告警类型" width="120">
                        <template #default="{ row }">
                            <el-tag :type="getAlarmTypeTag(row.alarmType).type" size="small">
                                {{ getAlarmTypeTag(row.alarmType).text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="alarmMessage" label="告警信息" />
                    <el-table-column prop="alarmTime" label="告警时间" width="180">
                        <template #default="{ row }">
                            {{ formatTime(row.alarmTime) }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    `,
    setup(props) {
        const getShopSensors = (shopId) => {
            return props.sensors.filter(s => s.shopId === shopId);
        };
        
        const getShopClosedCount = (shopId) => {
            return getShopSensors(shopId).filter(s => s.currentState === 'closed').length;
        };
        
        const getShopOpenCount = (shopId) => {
            return getShopSensors(shopId).filter(s => s.currentState === 'open').length;
        };
        
        const getShopStatusType = (shop) => {
            const sensors = getShopSensors(shop.id);
            const openCount = sensors.filter(s => s.currentState === 'open').length;
            const offlineCount = sensors.filter(s => s.isOffline).length;
            
            if (offlineCount > 0) return 'danger';
            if (openCount > 0) return 'warning';
            return 'success';
        };
        
        const getShopStatusText = (shop) => {
            const sensors = getShopSensors(shop.id);
            const openCount = sensors.filter(s => s.currentState === 'open').length;
            const offlineCount = sensors.filter(s => s.isOffline).length;
            
            if (offlineCount > 0) return `${offlineCount}个离线`;
            if (openCount > 0) return `${openCount}个开启`;
            return '全部关闭';
        };
        
        const getShopCardClass = (shop) => {
            const type = getShopStatusType(shop);
            return {
                'shop-card-normal': type === 'success',
                'shop-card-warning': type === 'warning',
                'shop-card-danger': type === 'danger',
            };
        };
        
        const getAlarmTypeTag = (type) => {
            const map = {
                'SWITCH_NOT_CLOSED': { text: '开关未关闭', type: 'warning' },
                'SENSOR_OFFLINE': { text: '传感器离线', type: 'danger' },
            };
            return map[type] || { text: type, type: 'info' };
        };
        
        const formatTime = (time) => {
            if (!time) return '-';
            return new Date(time).toLocaleString('zh-CN');
        };
        
        return {
            getShopSensors,
            getShopClosedCount,
            getShopOpenCount,
            getShopStatusType,
            getShopStatusText,
            getShopCardClass,
            getAlarmTypeTag,
            formatTime,
        };
    }
};

// 导出组件
if (typeof window !== 'undefined') {
    window.HeaderNav = HeaderNav;
    window.OverviewPage = OverviewPage;
}

